<script lang="ts">
import { defineComponent, createVNode, watch } from 'vue'
import * as AntdIcons from '@ant-design/icons-vue'
import { ANT_ICON_PREFIX, LOCAL_ICON_PREFIX } from './index'
import svgIcon from './svg-icon.vue'

export default defineComponent({
    name: 'Icon',
    props: {
        name: {
            type: String,
            required: true
        },
        size: {
            type: String,
            default: '16px'
        },
        color: {
            type: String,
            default: 'inherit'
        },
        invert: {
            type: Boolean,
            default: false
        }
    },
    setup(props) {
        const renderIcon = () => {
            if (props.name.indexOf(ANT_ICON_PREFIX) === 0) {
                const iconName = props.name.replace(ANT_ICON_PREFIX, '');
                const AntIcon = AntdIcons[iconName as keyof typeof AntdIcons];
                if (AntIcon) {
                    return createVNode(AntIcon, {
                        style: {
                            fontSize: props.size,
                            color: props.color,
                            transform: props.invert ? 'rotate(180deg)' : 'none'
                        }
                    });
                }
            }
            if (props.name && props.name.indexOf(LOCAL_ICON_PREFIX) === 0) {
                const iconName = props.name;
                console.log(iconName)
                return createVNode(svgIcon, {
                    name: `${iconName}`,
                    size: props.size,
                    color: props.color,
                    class: 'svg-icon'
                });
            }
            return createVNode('span', {}, [`未知图标: ${props.name}`]);
        };

        return () => renderIcon();
    }
})
</script>